<demo>
响应式
</demo>
<template>
  <div>
    <Row class="demoBox">
      <Col
        span="24"
        :ipad="{ span: 12 }"
        :narrowPc="{ span: 8 }"
        :pc="{ span: 6 }"
        class="demoBox-item"
        >Col</Col
      >
      <Col
        span="24"
        :ipad="{ span: 12 }"
        :narrowPc="{ span: 8 }"
        :pc="{ span: 6 }"
        class="demoBox-item1"
        >Col</Col
      >
      <Col
        span="24"
        :ipad="{ span: 12 }"
        :narrowPc="{ span: 8 }"
        :pc="{ span: 6 }"
        class="demoBox-item"
        >Col</Col
      >
      <Col
        span="24"
        :ipad="{ span: 12 }"
        :narrowPc="{ span: 8 }"
        :pc="{ span: 6 }"
        class="demoBox-item1"
        >Col</Col
      >
      <Col
        span="24"
        :ipad="{ span: 12 }"
        :narrowPc="{ span: 8 }"
        :pc="{ span: 6 }"
        class="demoBox-item"
        >Col</Col
      >
      <Col
        span="24"
        :ipad="{ span: 12 }"
        :narrowPc="{ span: 8 }"
        :pc="{ span: 6, offset: 12 }"
        class="demoBox-item1"
        >Col</Col
      >
    </Row>
  </div>
</template>

<script lang="ts">
import Row from '../../lib/row/Row.vue'
import Col from '../../lib/row/Col.vue'
export default {
  components: {
    Row,
    Col,
  },
}
</script>

<style lang="scss" scoped>
.demoBox-item {
  background: rgba(0, 146, 255, 0.75);
  color: #fff;
  min-height: 50px;
  text-align: center;
  line-height: 50px;
  margin: 16px 0;
}
.demoBox-item1 {
  background: #0092ff;
  color: #fff;
  min-height: 50px;
  text-align: center;
  line-height: 50px;
  margin: 16px 0;
}
</style>
